<!-- 地图选择器模态框 -->
<div class="modal fade" id="mapModal" tabindex="-1" aria-labelledby="mapModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="mapModalLabel">选择地理位置</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row mb-3">
                    <div class="col-md-8">
                        <div class="input-group">
                            <input type="text" id="mapSearch" class="form-control" placeholder="搜索地点...">
                            <button class="btn btn-outline-secondary" type="button" id="searchBtn">
                                <i class="bi bi-search"></i> 搜索
                            </button>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <button class="btn btn-outline-primary w-100" id="currentLocationBtn">
                            <i class="bi bi-geo-alt"></i> 当前位置
                        </button>
                    </div>
                </div>
                
                <!-- 地图容器 -->
                <div id="mapContainer" style="height: 400px; border: 1px solid #ddd; border-radius: 5px;"></div>
                
                <div class="row mt-3">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="form-label">纬度</label>
                            <input type="text" id="selectedLatitude" class="form-control" readonly>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="form-label">经度</label>
                            <input type="text" id="selectedLongitude" class="form-control" readonly>
                        </div>
                    </div>
                </div>
                
                <div class="mb-3">
                    <label class="form-label">详细地址</label>
                    <textarea id="selectedAddress" class="form-control" rows="2" readonly></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="confirmLocationBtn">确认选择</button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
  window._AMapSecurityConfig = {
    securityJsCode: "5fae54bc2f80a4dd3f8888634dbbc984",
  };
</script>
<script src="https://webapi.amap.com/maps?v=2.0&key=50472ccdd6f8ba9f89864fcb2c1b038a&plugin=AMap.Geocoder,AMap.PlaceSearch,AMap.AutoComplete"></script>
<script src="https://webapi.amap.com/ui/1.1/main.js"></script>

<script>
let map = null;
let marker = null;
let geocoder = null;

document.addEventListener('DOMContentLoaded', function() {
    // 初始化地图
    function initMap() {
        console.log('开始初始化地图...');
        // 确保地图容器可见
        const mapContainer = document.getElementById('mapContainer');
        console.log('地图容器:', mapContainer);
        
        if (mapContainer && mapContainer.offsetWidth > 0 && mapContainer.offsetHeight > 0) {
            console.log('地图容器可见，开始创建地图实例');
            
            try {
                // 检查AMap对象是否已加载
                if (typeof AMap === 'undefined') {
                    console.error('高德地图API未加载');
                    alert('地图加载失败，请检查网络连接或刷新页面');
                    return;
                }
                
                // 检查AMap.Geocoder是否存在
                if (typeof AMap.Geocoder === 'undefined') {
                    console.error('AMap.Geocoder未定义，可能需要加载额外的插件');
                    alert('地图功能加载不完整，请刷新页面重试');
                    return;
                }
                
                map = new AMap.Map('mapContainer', {
                    zoom: 13,
                    center: [116.397428, 39.90923], // 默认中心点（北京）
                    viewMode: '3D'
                });
                
                console.log('地图实例创建成功:', map);
                
                // 初始化地理编码器
                geocoder = new AMap.Geocoder({
                    city: "全国"
                });
                
                // 添加地图点击事件
                map.on('click', function(e) {
                    console.log('地图被点击:', e.lnglat);
                    updateSelectedLocation(e.lnglat.getLng(), e.lnglat.getLat());
                });
                
                // 添加默认标记
                marker = new AMap.Marker({
                    map: map,
                    draggable: true,
                    position: [116.397428, 39.90923]
                });
                
                console.log('标记创建成功:', marker);
                
                // 标记拖动事件
                marker.on('dragend', function(e) {
                    console.log('标记被拖动:', e.lnglat);
                    updateSelectedLocation(e.lnglat.getLng(), e.lnglat.getLat());
                });
                
                // 添加地图加载完成事件
                map.on('complete', function() {
                    console.log('地图加载完成');
                });
                
            } catch (error) {
                console.error('地图初始化失败:', error);
                console.error('错误详情:', error.message, error.stack);
                alert('地图初始化失败: ' + error.message + '，请刷新页面重试');
            }
        } else {
            console.log('地图容器不可见，延迟初始化');
            // 如果地图容器不可见，延迟初始化
            setTimeout(initMap, 100);
        }
    }
    
    // 更新选中位置
    function updateSelectedLocation(lng, lat) {
        console.log('更新位置:', lng, lat);
        // 更新坐标显示
        document.getElementById('selectedLatitude').value = lat;
        document.getElementById('selectedLongitude').value = lng;
        
        // 移动标记
        if (marker) {
            marker.setPosition([lng, lat]);
        }
        
        // 立即显示临时地址信息
        document.getElementById('selectedAddress').value = '正在获取地址信息...';
        
                // 反地理编码获取地址
                if (geocoder) {
                    console.log('开始反地理编码...');
                    geocoder.getAddress([lng, lat], function(status, result) {
                        console.log('反地理编码结果状态:', status);
                        console.log('反地理编码结果数据:', result);
                        
                        if (status === 'complete' && result.regeocode) {
                            const formattedAddress = result.regeocode.formattedAddress;
                            console.log('成功获取到地址:', formattedAddress);
                            document.getElementById('selectedAddress').value = formattedAddress;
                            
                            // 同时更新地点输入框
                            const locationField = document.getElementById('location');
                            if (locationField) {
                                locationField.value = formattedAddress;
                                console.log('已更新地点字段:', formattedAddress);
                            }
                        } else {
                            console.log('反地理编码失败，状态:', status, '结果:', result);
                            
                            // 检查是否是API密钥或权限问题
                            let errorMessage = '无法获取地址信息，请稍后重试';
                            if (status === 'no_data') {
                                errorMessage = '该位置无详细地址信息';
                            } else if (status === 'error') {
                                if (result === 'USERKEY_PLAT_NOMATCH') {
                                    errorMessage = 'API密钥与平台不匹配，请检查密钥配置';
                                } else {
                                    errorMessage = 'API调用失败: ' + result + '，请检查密钥配置';
                                }
                            }
                            
                            document.getElementById('selectedAddress').value = errorMessage;
                            
                            // 尝试使用简单的地理位置描述
                            const simpleAddress = `经纬度: ${lng.toFixed(6)}, ${lat.toFixed(6)}`;
                            const locationField = document.getElementById('location');
                            if (locationField) {
                                locationField.value = simpleAddress;
                            }
                        }
                    });
                } else {
                    console.log('地理编码器未初始化');
                    document.getElementById('selectedAddress').value = '地图功能未初始化，请刷新页面';
                }
    }
    
    // 测试反地理编码功能
    function testReverseGeocoding() {
        console.log('=== 测试反地理编码功能 ===');
        if (geocoder) {
            // 测试北京天安门的坐标
            geocoder.getAddress([116.397428, 39.90923], function(status, result) {
                console.log('测试反地理编码结果状态:', status);
                console.log('测试反地理编码结果数据:', result);
                if (status === 'complete' && result.regeocode) {
                    console.log('测试成功，地址:', result.regeocode.formattedAddress);
                    alert('反地理编码测试成功: ' + result.regeocode.formattedAddress);
                } else {
                    console.log('测试失败，状态:', status);
                    alert('反地理编码测试失败，状态: ' + status + '，请检查控制台查看详情');
                }
            });
        } else {
            console.log('地理编码器未初始化，无法测试');
            alert('地理编码器未初始化，请先打开地图选择器');
        }
    }
    
    // 调试函数：检查地图点击事件
    function debugMapClick() {
        if (map) {
            console.log('地图实例存在，添加点击监听');
            map.on('click', function(e) {
                console.log('地图被点击:', e.lnglat);
                updateSelectedLocation(e.lnglat.getLng(), e.lnglat.getLat());
            });
        } else {
            console.log('地图实例不存在');
        }
    }
    
    // 搜索功能
    document.getElementById('searchBtn').addEventListener('click', function() {
        const keyword = document.getElementById('mapSearch').value.trim();
        if (keyword && map) {
            // 使用PlaceSearch进行更精确的地点搜索
            AMap.plugin(['AMap.PlaceSearch', 'AMap.AutoComplete'], function() {
                const placeSearch = new AMap.PlaceSearch({
                    pageSize: 10,
                    pageIndex: 1,
                    city: "全国",
                    citylimit: false
                });
                
                // 先尝试自动完成获取更精确的结果
                const autoComplete = new AMap.AutoComplete({
                    city: "全国",
                    input: "mapSearch"
                });
                
                placeSearch.search(keyword, function(status, result) {
                    if (status === 'complete' && result.poiList.pois.length > 0) {
                        const poi = result.poiList.pois[0];
                        const location = poi.location;
                        map.setCenter([location.lng, location.lat]);
                        updateSelectedLocation(location.lng, location.lat);
                        
                        // 自动填充详细地址
                        document.getElementById('selectedAddress').value = poi.name + (poi.address ? ' - ' + poi.address : '');
                    } else {
                        // 如果PlaceSearch失败，回退到地理编码
                        geocoder.getLocation(keyword, function(status, result) {
                            if (status === 'complete' && result.geocodes.length > 0) {
                                const location = result.geocodes[0].location;
                                map.setCenter([location.lng, location.lat]);
                                updateSelectedLocation(location.lng, location.lat);
                            } else {
                                alert('未找到相关地点，请尝试其他关键词');
                            }
                        });
                    }
                });
            });
        } else if (!keyword) {
            alert('请输入搜索关键词');
        }
    });
    
    // 支持回车键搜索
    document.getElementById('mapSearch').addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            document.getElementById('searchBtn').click();
        }
    });
    
    // 当前位置功能
    document.getElementById('currentLocationBtn').addEventListener('click', function() {
        if (navigator.geolocation && map) {
            navigator.geolocation.getCurrentPosition(
                function(position) {
                    const lng = position.coords.longitude;
                    const lat = position.coords.latitude;
                    map.setCenter([lng, lat]);
                    updateSelectedLocation(lng, lat);
                },
                function(error) {
                    alert('无法获取当前位置：' + error.message);
                }
            );
        } else {
            alert('浏览器不支持地理位置功能或地图未初始化');
        }
    });
    
    // 确认选择
    document.getElementById('confirmLocationBtn').addEventListener('click', function() {
        const lat = document.getElementById('selectedLatitude').value;
        const lng = document.getElementById('selectedLongitude').value;
        const address = document.getElementById('selectedAddress').value;
        
        console.log('确认选择:', {lat, lng, address});
        
        if (lat && lng) {
            // 更新表单字段 - 使用正确的ID（根据travel_create.html和travel_edit.html中的字段ID）
            const latitudeField = document.getElementById('latitude') || document.getElementById('id_latitude');
            const longitudeField = document.getElementById('longitude') || document.getElementById('id_longitude');
            const locationField = document.getElementById('location') || document.getElementById('id_location');
            
            console.log('找到的表单字段:', {
                latitude: latitudeField,
                longitude: longitudeField,
                location: locationField
            });
            
            if (latitudeField) latitudeField.value = lat;
            if (longitudeField) longitudeField.value = lng;
            if (locationField) locationField.value = address;
            
            console.log('更新后的表单字段值:', {
                latitude: latitudeField ? latitudeField.value : '未找到',
                longitude: longitudeField ? longitudeField.value : '未找到',
                location: locationField ? locationField.value : '未找到'
            });
            
            // 关闭模态框
            const modal = bootstrap.Modal.getInstance(document.getElementById('mapModal'));
            if (modal) {
                modal.hide();
            }
            
            // 显示成功提示
            alert('位置选择成功！经纬度和地址已自动填充。');
        } else {
            alert('请先选择位置（点击地图或搜索地点）');
        }
    });
    
    // 只在模态框显示时初始化地图，避免提前初始化导致的问题
    const mapModal = document.getElementById('mapModal');
    if (mapModal) {
        mapModal.addEventListener('show.bs.modal', function() {
            console.log('模态框即将显示，准备初始化地图');
        });
        
        mapModal.addEventListener('shown.bs.modal', function() {
            console.log('模态框已显示，开始初始化地图');
            // 确保地图容器有正确的高度
            document.getElementById('mapContainer').style.height = '400px';
            
            // 销毁旧地图实例（如果存在）
            if (map) {
                try {
                    map.destroy();
                    console.log('旧地图实例已销毁');
                } catch (e) {
                    console.log('清理旧地图实例时出错:', e);
                }
            }
            
            // 重新初始化地图
            setTimeout(function() {
                console.log('开始初始化地图...');
                initMap();
                
                // 自动获取当前位置
                setTimeout(function() {
                    getCurrentLocation();
                }, 500);
            }, 100);
        });
    }
    
    // 获取当前位置函数
    function getCurrentLocation() {
        if (navigator.geolocation && map) {
            console.log('开始自动获取当前位置...');
            
            // 检查表单中是否已有位置数据
            const latitudeField = document.getElementById('latitude') || document.getElementById('id_latitude');
            const longitudeField = document.getElementById('longitude') || document.getElementById('id_longitude');
            
            // 如果表单中已有经纬度数据，则使用已有数据
            if (latitudeField && longitudeField && latitudeField.value && longitudeField.value) {
                console.log('表单中已有位置数据，使用已有数据:', latitudeField.value, longitudeField.value);
                const lat = parseFloat(latitudeField.value);
                const lng = parseFloat(longitudeField.value);
                map.setCenter([lng, lat]);
                updateSelectedLocation(lng, lat);
                return;
            }
            
            // 如果没有位置数据，则获取当前位置
            navigator.geolocation.getCurrentPosition(
                function(position) {
                    const lng = position.coords.longitude;
                    const lat = position.coords.latitude;
                    console.log('获取到当前位置:', lng, lat);
                    map.setCenter([lng, lat]);
                    updateSelectedLocation(lng, lat);
                },
                function(error) {
                    console.log('自动获取当前位置失败:', error.message);
                    // 失败时使用默认位置（北京）
                    const defaultLng = 116.397428;
                    const defaultLat = 39.90923;
                    map.setCenter([defaultLng, defaultLat]);
                    updateSelectedLocation(defaultLng, defaultLat);
                    
                    // 根据错误类型显示不同的提示
                    let errorMessage = '无法自动获取当前位置';
                    switch(error.code) {
                        case error.PERMISSION_DENIED:
                            errorMessage = '位置权限被拒绝，请点击"当前位置"按钮手动获取或检查浏览器权限设置';
                            break;
                        case error.POSITION_UNAVAILABLE:
                            errorMessage = '位置信息不可用，请点击"当前位置"按钮重试';
                            break;
                        case error.TIMEOUT:
                            errorMessage = '获取位置超时，请点击"当前位置"按钮重试';
                            break;
                    }
                    
                    // 显示提示信息
                    const addressField = document.getElementById('selectedAddress');
                    if (addressField) {
                        addressField.value = errorMessage;
                    }
                },
                {
                    enableHighAccuracy: true,
                    timeout: 10000,
                    maximumAge: 300000
                }
            );
        } else {
            console.log('浏览器不支持地理位置功能或地图未初始化');
        }
    }
    
    // 添加调试按钮（仅在开发时使用）
    setTimeout(function() {
        const debugBtn = document.createElement('button');
        debugBtn.textContent = '调试信息';
        debugBtn.className = 'btn btn-warning btn-sm position-fixed';
        debugBtn.style.bottom = '10px';
        debugBtn.style.right = '10px';
        debugBtn.style.zIndex = '9999';
        debugBtn.onclick = function() {
            console.log('=== 地图选择器调试信息 ===');
            console.log('地图实例:', map);
            console.log('标记实例:', marker);
            console.log('地理编码器:', geocoder);
            console.log('模态框:', document.getElementById('mapModal'));
            console.log('表单字段:', {
                latitude: document.getElementById('latitude'),
                longitude: document.getElementById('longitude'),
                location: document.getElementById('location')
            });
            debugMapClick();
            testReverseGeocoding();
        };
        document.body.appendChild(debugBtn);
        console.log('调试按钮已添加');
    }, 2000);
});
</script>
